import * as echarts from 'echarts';
import React, { useEffect, useState } from 'react';
import axios from 'axios';


const UserRoleChart = () => {
    const [roleNumData, setRoleNumData] = useState({});                 // 角色数量
    useEffect(() => {
        const getHomeData = async () => {
            const resOfRoleNum = await axios('/home/main/roleChart');
            setRoleNumData(resOfRoleNum.data.data);
        }
        getHomeData();
    }, []);

    const xData = Object.keys(roleNumData);
    const yData = Object.values(roleNumData);

    let options = {
        title: {
            text: 'User Role',
            textStyle: {
                fontSize: 18,
            },
            // subtext: '',
            // subtextStyle: {},
            padding: [10, 0, 500, 300],
        },

        legend: {                   //图例
            type: 'plain',
            top: '1%',
            left: '3%',
            textStyle: {
                color: '#000',
            },
            tooltip: {
                show: true,
                color: '#000',
            },
            data: [
                {
                    name: 'amount',
                    icon: 'circle', //图例的外框样式
                    // textStyle: {}, //单独设置某一图例的颜色
                },
            ],
        },

        tooltip: {
            show: true,
            trigger: 'item',    //数据项图形触发
            axisPointer: {      //指示样式
                type: 'shadow',
                axis: 'auto',
            },
            padding: 5,
            textStyle: {        //提示框内容样式
                color: '#000',
            },
        },

        grid: {                 //grid区域
            show: false,        //是否显示直角坐标系网格
            top: 80,            //相对位置：top\bottom\left\right
            containLabel: false,    //grid区域是否包含坐标轴的刻度标签
            tooltip: {
                show: true,
                trigger: 'item',
                textStyle: {
                    color: '#000',
                },
            },
        },

        xAxis: {                //x轴
            show: true,
            position: 'bottom',
            offset: 0,
            type: 'category',   //轴类型，默认category
            name: 'role',
            nameLocation: 'end',    //轴名称相对位置
            nameTextStyle: {
                color: '#000',
                padding: [5, 0, 0, -5],
            },
            nameGap: 15,        //坐标轴名称与轴线之间的距离
            //nameRotate: 270,  //坐标轴名字旋转
            axisLine: {         //坐标轴轴线
                show: true,
                symbol: ['none', 'arrow'],  //是否显示轴线箭头
                symbolSize: [8, 8],         //箭头大小
                symbolOffset: [0, 7],       //箭头位置
                lineStyle: {
                    color: '#000',
                    width: 1,
                    type: 'solid',
                },
            },
            axisTick: {         //坐标轴刻度
                show: true,
                inside: true,   //是否朝内
                length: 3,
                lineStyle: {
                    //color: 'red', //默认取轴线颜色
                    width: 1,
                    type: 'solid',
                },
            },
            axisLabel: {        //坐标轴标签
                show: true,
                inside: false,
                rotate: 0,      //旋转角度
                margin: 5,      //刻度标签与轴线之间的距离
                //color: 'red', //默认取轴线的颜色
            },
            splitLine: {        //grid区域中的分隔线
                show: false,    //category类目轴不显示，无意义
                lineStyle: {
                    // color: 'red',
                    // width: 1,
                    // type: 'solid',
                },
            },
            splitArea: {        //网格区域
                show: false,    //默认false
            },
            data: xData, //内容
        },

        yAxis: {
            show: true,
            position: 'left',
            offset: 0,
            type: 'value',      //轴类型，默认category
            name: 'amount',     //轴名称
            nameLocation: 'end',
            nameTextStyle: {
                color: '#000',
                padding: [5, 0, 0, 5],
            },
            nameGap: 15,
            
            axisLine: {
                show: true,
                symbol: ['none', 'arrow'],
                symbolSize: [8, 8],
                symbolOffset: [0, 7],
                lineStyle: {
                    color: '#000',
                    width: 1,
                    type: 'solid',
                },
            },

            axisTick: {
                show: true,
                inside: true,
                length: 3,
                lineStyle: {
                    width: 1,
                    type: 'solid',
                },
            },

            // axisLabel: {
            //     show: true,
            //     lineStyle: {
            //         color: '#000',
            //         with: 1,
            //         type: 'dashed',
            //     },
            // },
            splitArea: {
                show: false,
            },
        },

        series: [
            {
                name: 'amount',        //系列名称
                type: 'bar',                
                legendHoverLink: true,      //是否启用图例 hover 时的联动高亮
                label: {
                    show: false,
                    positon: 'insideTop',   //相对位置
                    rotate: 0,              //旋转角度
                    color: '#000',
                },
                itemStyle: {                //图形形状
                    color: 'blue',
                    BorderRadius: [18, 18, 0, 0],
                },
                barWidth: '30%',             //柱形宽度
                barCategoryGap: '20%',      //柱形间距
                data: yData,
            },
        ],
    }

    useEffect(() => {
        const myCharts = echarts.init(document.getElementById('userRoleChart'));
        myCharts.setOption(options);
        return () => myCharts.dispose();
    });

    return (
        <div id='userRoleChart' style={{ width: '1000px', height: '340px', marginLeft: '50px', marginRight: '50px' }}></div>
    );
}

export default UserRoleChart;